<?php if (!defined('THINK_PATH')) exit(); /*a:2:{s:67:"E:\yangjian\public/../application/index\view\contacts\contacts.html";i:1529817614;s:45:"../application/index/view/default/header.html";i:1529654189;}*/ ?>
<!DOCTYPE HTML>
<html>

<head>
	<title>个人通讯录管理</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!--[if lte IE 8]><script src="/static/js/ie/html5shiv.js"></script><![endif]-->
	<link rel="stylesheet" href="/static/css/main.css" />
	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
	<!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie9.css" /><![endif]-->
	<!--[if lte IE 8]><link rel="stylesheet" href="/static/css/ie8.css" /><![endif]-->
	<link rel="stylesheet" href="/static/css/login.css">
	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/skel.min.js"></script>
	<script src="/static/js/util.js"></script>
	<!--[if lte IE 8]><script src="/static/js/ie/respond.min.js"></script><![endif]-->
	<script src="/static/js/main.js"></script>
	<script>
		$(function () { 

			$('.loginBtn').on('click',function(){
				$('.login').removeClass('none');
				$('.register').addClass('none');
			})
			$('.registerBtn').on('click',function(){
				$('.login').addClass('none');
				$('.register').removeClass('none')
			})
			$('.x').on('click',function(){
				$('.login').addClass('none');
				$('.register').addClass('none');
			})

			
		 });
	</script>
	<script>
		$(document).ready(function() {
			$('#login-submit').on('click',function(){
				$.ajax({
					type:'POST',
					url:'/index/user/login',
					dataType:'json',
					data:{'username':$('#login .username').val(),'password':$('#login .password').val()},
					success:function(data){
						alert(data.msg);
						if(!data.type) {
							window.location.reload();
						}
					}
				});
			});
	
			$('#register-submit').on('click',function(){
				$.ajax({
					type:'POST',
					url:'/index/user/register',
					dataType:'json',
					data:{'username':$('#register .username').val(),'password':$('#register .password').val(),'repassword':$('#register .repassword').val()},
					success:function(data){
						alert(data.msg);
						if(!data.type){
							window.location.reload();
						}
					}
				});
			});
		})
	
	</script>
</head>

<body id="top" >

	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Header -->
		<header id="header">
			<h1>
				<a href="/">个人信息管理网站</a>
			</h1>
			<nav class="links">
				<ul>
					<li>
						<a href="/">博客</a>
					</li>
					<li>
						<a href="/index/contacts">个人通讯录</a>
					</li>
					<li>
						<a href="/admin/index/login">网站后台管理</a>
					</li>
					<?php if($userData){ ?>
					<li>
						<a href="#">欢迎<?php echo $userData['username']; ?>登陆！<span>用户ID为<?php echo $userData['uid']; ?></span></a>
					</li>
					<li>
						<a href="/index/user/loginout" id="loginout" >注销</a>
					</li>
					<?php }else{ ?>
					<li>
						<a href="#" class="loginBtn" >登陆</a>
					</li>
					<li>
						<a href="#" class="registerBtn" >注册</a>
					</li>
					<?php } ?>
				</ul>
			</nav>
			<nav class="main">
				<ul>
					<!-- <li class="search">
						<a class="fa-search" href="#search">Search</a>
						<form id="search" method="get" action="#">
							<input type="text" name="query" placeholder="搜索" />
						</form>
					</li> -->
					<li class="menu">
						<a class="fa-bars" href="#menu">Menu</a>
					</li>
				</ul>
			</nav>
		</header>

		<!-- Menu -->
		<section id="menu">

			<!-- Search -->
			<!-- <section>
				<form class="search" method="get" action="#">
					<input type="text" name="query" placeholder="搜索" />
				</form>
			</section> -->

			<!-- Links -->
			<section>
				<ul class="links">
					<li>
						<a href="/">
							<h3>个人博客</h3>
							<p>勇敢的人不是不害怕，而是怕也要向前走。</p>
						</a>
					</li>
					<li>
						<a href="/index/contacts">
							<h3>个人通讯录</h3>
							<p>请登录后再使用，建议使用1366X768或以上的分辨率浏览</p>
						</a>
					</li>
					<li>
						<a href="/admin/index/login">
							<h3>网站后台管理</h3>
							<p>请登录后再使用，建议使用1366X768或以上的分辨率浏览</p>
						</a>
					</li>
				</ul>
			</section>

			<!-- Actions -->
			<section>
				<ul class="actions vertical">
					<?php if($userData){ ?>
					<li>
						<a href="#">欢迎<?php echo $userData['username']; ?>登陆！</a>
					</li>
					<li>
						<a href="/index/user/loginout" id="loginout" >注销</a>
					</li>
					<?php }else{ ?>
					<li>
						<a href="#" class="loginBtn" >登陆</a>
					</li>
					<li>
						<a href="#" class="registerBtn" >注册</a>
					</li>
					<?php } ?>
				</ul>
			</section>

		</section>

		<div class="login none " id="login" >
			<h3>用户登录</h3>
			<form>
				<div>
					<span>用户名：</span>
					<input class="username" type="text" placeholder="请输入用户名" >
				</div>
				<div>
					<span>密码：</span>
					<input class="password" type="password" placeholder="请输入密码" >
				</div>
				<div>
					<button type="submit" id="login-submit"  >登录</button>
				</div>
			</form>
			<i class="x"></i>
		</div>
		<div class="register none" id="register" >
				<h3>用户注册</h3>
				<form>
					<div>
						<span>用户名：</span>
						<input class="username" type="text" placeholder="请输入用户名" >
					</div>
					<div>
						<span>密码：</span>
						<input class="password" type="password" placeholder="请输入密码" >
					</div>
					<div>
						<span>确认密码：</span>
						<input class="repassword" type="password" placeholder="再次输入密码" >
					</div>
					<div>
						<button type="submit" id="register-submit" >注册</button>
					</div>
				</form>
				<i class="x"></i>
			</div>


<script>
	$(function () {
		$('#addBtn').on('click', function () {
			$('.add').removeClass('none');
			$('.edit').addClass('none');
		})
		$('.editBtn').on('click', function () {
			$('.add').addClass('none');
			$('.edit').removeClass('none')
		})
		$('.x').on('click', function () {
			$('.add').addClass('none');
			$('.edit').addClass('none');
		})
	})
</script>

<style>
	ul,
	ul li {
		padding: 0;
		margin: 0;
	}

	.breadcrumb {
		height: 45px;
		width: 140px;
		display: inline-block;
		background: #2ebaae;
		text-align: center;
		line-height: 45px;
		margin-bottom: 20px;
		border-radius: 4px;
		color: #fff;
	}

	.breadcrumb:hover {
		color: #fff !important;
	}

	.title ul li {
		float: left;
	}

	.title ul {
		border-bottom: 2px solid #2ebaae;
		padding: 10px;
		width: 100%;
		line-height: 28px;
	}

	.content .list:nth-child(odd) {
		background: rgba(160, 160, 160, 0.075);
	}

	.content .list ul li {
		float: left;
	}

	.content .list ul {
		padding: 10px;
		line-height: 28px;
		font-size: 15px;
		border-bottom: solid 1px rgba(160, 160, 160, 0.3);
	}

	.content .list ul li:nth-child(1),
	.title ul li:nth-child(1) {
		width: 8%
	}

	.content .list ul li:nth-child(2),
	.title ul li:nth-child(2) {
		width: 12%
	}

	.content .list ul li:nth-child(3),
	.title ul li:nth-child(3) {
		width: 18%
	}

	.content .list ul li:nth-child(4),
	.title ul li:nth-child(4) {
		width: 25%
	}

	.content .list ul li:nth-child(5),
	.title ul li:nth-child(5) {
		width: 25%
	}

	.content .list ul li:nth-child(6),
	.title ul li:nth-child(6) {
		width: 12%
	}

	.add,.edit{
		position: fixed;
		width: 93%;
		top: 13%;
		background: #fff;
		padding: 4%;
		margin-left: -6%;
	}

	.add h3,.edit h3{
		font-size: 22px;
	}

	.add li,.edit li{
		margin-bottom: 15px;
	}

	span.label {
		width: 5%;
		float: left;
		line-height: 44px;
		height: 44px;
	}

	.add input,.edit input{
		width: 95%;
	}

	.add .x, .edit .x {
		position: absolute;
		top: 4%;
		right: 3%;
		width: 30px;
		height: 30px;
		background: url(/static/images/icon_gb.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

</style>
<!-- Main -->
<div id="main">

	<!-- Post -->

	<article class="post clearfix">

		<div>
			<a href="#" id="addBtn" class="breadcrumb">新建联系人</a>
		</div>
		<div class="title clearfix">
			<ul class="clearfix">
				<li>姓名</li>
				<li>电话</li>
				<li>邮箱</li>
				<li>地址</li>
				<li>备注</li>
				<li>操作</li>
			</ul>
		</div>


		<div class="content clearfix">
			<ul>
				<?php foreach($contactsList as $contacts){ ?>
				<li class="list clearfix">
					<ul class="clearfix">
						<li title="<?php echo $contacts['name']; ?>" ><?php echo $contacts['name']; ?></li>
						<li title="<?php echo $contacts['tel']; ?>" ><?php echo $contacts['tel']; ?></li>
						<li title="<?php echo $contacts['email']; ?>" ><?php echo $contacts['email']; ?></li>
						<li title="<?php echo $contacts['addr']; ?>" ><?php echo $contacts['addr']; ?></li>
						<li title="<?php echo $contacts['msg']; ?>" ><?php echo $contacts['msg']; ?></li>
						
						<li>
							<a href="/index/contacts/edit?tid=<?php echo $contacts['tid']; ?>" class="editContacts editBtn" id="editBtn" data-id="<?php echo $contacts['tid']; ?>">编辑</a>
							<a href="#" class="deleteContacts" data-id="<?php echo $contacts['tid']; ?>">删除</a>
						</li>
					</ul>
				</li>
				<?php }?>
			</ul>
		</div>


	</article>

	<div class="add none">
		<h3 class="title">新建联系人</h3>
		<ul>
			<li>
				<span class="label">姓名</span>
				<input type="text" class="aname" value="">
			</li>
			<li>
				<span class="label">电话</span>
				<input type="text" class="atel" value="">
			</li>
			<li>
				<span class="label">邮箱</span>
				<input type="text" class="aemail" value="">
			</li>
			<li>
				<span class="label">地址</span>
				<input type="text" class="aaddr" value="">
			</li>
			<li>
				<span class="label">备注</span>
				<input type="text" class="amsg" value="">
			</li>
			<li>
				<button class="addC" style="    margin: 15px 0;" >新建</button>
			</li>
		</ul>
		<i class="x"></i>
	</div>



</div>



</div>

<!-- Scripts -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/skel.min.js"></script>
<script src="/static/js/util.js"></script>
<!--[if lte IE 8]><script src="/static/js/ie/respond.min.js"></script><![endif]-->
<script src="/static/js/main.js"></script>

<script>
	$(function(){
		$('.addC').on('click',function(){
            $.ajax({
                type:'POST',
                url:'contacts/add',
                dataType:'json',
                data:{'aname':$('.aname').val(),'atel':$('.atel').val(),'aemail':$('.aemail').val(),'aaddr':$('.aaddr').val(),'amsg':$('.amsg').val()},
                success:function(data){
                    alert(data.msg);
                    if(!data.code){
                        window.location.href="/index/contacts";
                    }
                }
            });
        });


		 $('.deleteContacts').on('click',function(){
            $.ajax({
                type:'POST',
                url:'contacts/delete',
                dataType:'json',
                data:{'tid':$(this).data('id')},
                success:function(data){
                    alert(data.msg);
                    console.log(data);
                    if(!data.code){
                        window.location.reload();
                    }
                }
            });
        });



	})
</script>

</body>

</html>